<template>
    <div class="page-container">
        <div class="table-box" v-show="header.length > 0">
            <el-table class="table-list" size="small" :data="tableData" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}">
                <el-table-column
                    v-for="item in header"
                    :key="item.label"
                    :prop="item.label"
                    :min-width="item.width"
                    :class-name="item.label !== 'productName' ? '' : 'order-goods'">
                    <template #header>
                        <span v-if="item.label !== 'productName'" style="margin-right:2px;">{{ item.name }}</span>
                        <el-row v-else class="order-row-item order-border-none">
                            <el-col :span="6">产品名称</el-col>
                            <el-col :span="6">详情规格</el-col>
                            <el-col :span="4">数量</el-col>
                            <el-col :span="4">单价(元)</el-col>
                            <el-col :span="4">小计(元)</el-col>
                        </el-row>
                        <!-- 可搜索表头 -->
                        <el-popover placement="bottom" :width="200" trigger="click" v-if="item.isFilter && item.filter == 'search'">
                            <template #reference>
                                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                                    <ele-Search/>
                                </el-icon>
                            </template>
                            <el-input :placeholder="`请输入${item.name}`" v-model.trim="params[item.label]" size="small" clearable @input="getList"/>
                        </el-popover>
                        <!-- 可筛选表头 -->
                        <el-popover placement="bottom" :width="120" trigger="click" v-if="item.isFilter && item.filter == 'filter'">
                            <template #reference>
                                <el-icon :size="15" :color="params[item.label] != null ? 'var(--el-color-warning)' : 'var(--el-color-primary)'">
                                    <ele-Filter/>
                                </el-icon>
                            </template>
                            <el-scrollbar max-height="600px">
                                <el-radio-group v-model="params[item.label]" size="small" v-if="filterData[item.label] && filterData[item.label].length > 0">
                                    <el-radio v-for="radio in filterData[item.label]" :key="radio.name" :label="radio.value" @click.prevent="radioChange(radio.value, item.label)">{{ radio.name }}
                                    </el-radio>
                                </el-radio-group>
                                <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
                            </el-scrollbar>
                        </el-popover>
                    </template>

                    <template v-slot="{row}">
                        <!-- 采购单号 -->
                        <div v-if="item.label === 'orderNo'" class="primary" @click="openDetail(row)">{{ row.orderNo }}</div>
                        <!-- 产品名称 -->
                        <div v-else-if="item.label === 'productName'" style="flex:1;display:flex;flex-direction: column;">
                            <div v-for="(product, index) in row.productItems" :key="product.id" style="flex: 1;height:100%">
                                <el-row class="order-row-item" style="height:100%">
                                    <el-col :span="6">{{ product.name }}</el-col>
                                    <el-col :span="6">{{ product.specification }}</el-col>
                                    <el-col :span="4">{{ product.num }}</el-col>
                                    <el-col :span="4">{{ product.price.toFixed(2) }}</el-col>
                                    <el-col :span="4">{{ product.total.toFixed(2) }}</el-col>
                                </el-row>
                                <el-divider style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)" v-if="index < row.productItems.length - 1"/>
                            </div>
                        </div>
                        <div v-else-if="item.label === 'type'">{{ row.type == 0 ? '个人' : '企业' }}</div>
                        <div v-else-if="'source stage paymentType'.includes(item.label)">
                            <div v-for="dict in filterData[item.label]" v-show="dict.value == row[item.label]">{{ dict.name }}</div>
                        </div>
                        <!--            <div v-else-if="item.label === 'source'">-->
                        <!--              <template v-for="dict in filterData['orderSourceType']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
                        <!--            </div>-->
                        <!--            <div v-else-if="item.label === 'stage'">-->
                        <!--              <template v-for="dict in filterData['OrderStage']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
                        <!--            </div>-->
                        <!--            <div v-else-if="item.label === 'paymentType'">-->
                        <!--              <template v-for="dict in filterData['PaymentType']" v-if="dict.value == row[item.label]">{{ dict.name }}</template>-->
                        <!--            </div>-->
                        <div v-else>{{ row[item.label] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template v-slot="{row}">
                        <el-button size="small" type="primary" link>去处理</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
// 售后列表
import {onMounted, reactive, toRefs} from 'vue'

export default {
    name: 'AfterSale',
    setup() {
        const state = reactive({
            header: [],
        })

        onMounted(() => {

        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style scoped lang="scss">

</style>
